---
title: Avatar
description: An image component featuring an alternative representation for depicting the user.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/components/ui/avatar?raw';

<LinkButton href="https://rn-primitives.vercel.app/avatar">
  Avatar Primitive
</LinkButton>
<LinkButton target="_blank" href="https://rnr-showcase.vercel.app/avatar">
  Demo
</LinkButton>

<br />

An image component featuring an alternative representation for depicting the user.

### Installation
<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add avatar
    ```
  </TabItem>
  <TabItem label='Manual'>
    <Aside type="tip" title="Dependency">
        Before copy/pasting, add the <a href="https://rn-primitives.vercel.app/avatar" className='text-white font-bold'>avatar primitive</a> to your project.
    </Aside>

    <br />

    **Copy/paste the following code to `~/components/ui/avatar.tsx`:**


    <Code code={importedCode} lang="tsx" title="~/components/ui/avatar.tsx" />
  </TabItem>
</Tabs>
### Usage

```tsx
import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar';
import { Text } from '~/components/ui/text';

const GITHUB_AVATAR_URI = 'https://github.com/mrzachnugent.png';

function Example() {
  return (
     <Avatar alt="Zach Nugent's Avatar">
        <AvatarImage source={{ uri: GITHUB_AVATAR_URI }} />
        <AvatarFallback>
          <Text>ZN</Text>
        </AvatarFallback>
      </Avatar>
  );
}
```
## Props

### Avatar

Extends [`View`](https://reactnative.dev/docs/view#props) props

|  Prop   |  Type   |     Note     |
| :-----: | :-----: | :----------: |
| alt \*  | string  |              |
| asChild | boolean | _(optional)_ |

### AvatarImage

Extends [`Image`](https://reactnative.dev/docs/image) props except `alt`

|   Prop   |  Type   |     Note     |
| :------: | :-----: | :----------: |
| asChild  | boolean | _(optional)_ |

### AvatarFallback

Extends [`View`](https://reactnative.dev/docs/view#props) props

|  Prop   |  Type   |     Note     |
| :-----: | :-----: | :----------: |
| asChild | boolean | _(optional)_ |